<template>
  <div class="bookingInfo bg_g">
    <van-sticky>
      <div class="infoTop flex_r_sb_c tc_w bg_g">
        <span class="f_16 fw_700">预约</span>
        <div v-if="[0, 1].indexOf(bookingInfo.status) !== -1">
          <span class="f_16">您的预约验证码:</span>
          <span class="f_20 fw_700">{{ bookingInfo.bookingCode }}</span>
        </div>
      </div>
    </van-sticky>
    <div class="infoContent bg_g">
      <booking-card class="margin_b16" :bookingData="bookingInfo" type="big" @reload="getBookingDetails" />
      <div v-if="[0, 1].indexOf(bookingInfo.status) !== -1" class="bookingProgress bg_w border_r8">
        <div class="progressTop flex_r_sb_c">
          <div class="f_16 fw_700 tc_1">预约进度</div>
          <div class="f_12 tc_8">审核会在1个小时内完成</div>
        </div>
        <div class="progressBottom">
          <div class="progressItem flex_r_fs_c" v-for="(item, index) in progressInfo" :key="index">
            <div class="progressIcon margin_r16" :class="[item.done === 1 ? 'done' : 'unDone']"></div>
            <div class="progressContent">
              <div class="PC_text f_14 tc_1 margin_b8" v-text="item.title"></div>
              <div class="PC_subText f_11 tc_8" v-text="item.remark"></div>
            </div>
          </div>
          <div class="progressLine bg_g" :style="{height: progressInfo.length * 5 + 'rem'}"></div>
        </div>
      </div>
      <div v-if="bookingInfo.status === 2 && bookingInfo.is_comment === 0">
        <div class="evaluationBtn">
          <div class="btn border_r8 f_14 tc_1 bg_w" @click="goEvaluate">评价一下</div>
        </div>
      </div>
      <div v-if="bookingInfo.status === 2 && bookingInfo.is_comment === 1" class="rateBox border_r8">
        <div class="rate bg_w border_r8 flex_r_sb_c">
          <span class="rateLeft f_14 tc_1">我的评价</span>
          <div class="rateRight flex_r_fe_c">
            <van-rate v-model="rate.rateValue" size="2rem" readonly color="#31A2A3" void-icon="star" void-color="#ccc" />
            <div v-if="rate.rateValue !== 0" class="f_14 tc_1 margin_l12">{{ rate.rateValue }}分</div>
          </div>
        </div>
        <div v-if="rate.rateInput">
          <van-field class="rateInput f_14" v-model="rate.rateInput" rows="5" readonly maxlength="200" type="textarea" placeholder="" />
        </div>
      </div>
      <div v-if="bookingInfo.status === 3" class="rateBox border_r8">
        <div class="rate bg_w border_r8 flex_r_fs_c">
          <span class="rateLeft f_14 tc_1">取消原由</span>
        </div>
        <div>
          <van-field class="rateInput f_14" v-model="bookingInfo.cancel_remark" rows="3" readonly maxlength="200" type="textarea" placeholder="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bookingCard from '@/components/bookingCard.vue'
import user from '@/api/user'
export default {
  components: {
    bookingCard
  },
  data() {
    return {
      id: this.$route.params.id,
      bookingInfo: {
        // id: '1',
        // name: '总部-3D试衣间',
        // imgSrc: 'https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg',
        // time: '2020-11-09 15:00-18:00',
        // address: '东方明珠花苑明福楼千誉二楼',
        // serviceItem: '参观、洽谈',
        // peopleNum: '6人',
        // other: '需要会议室、需要茶室需要会议室、需要茶室需要会议室、需要茶室',
        // state: 'cencel',
        // bookingState: 'audit',
        // doneState: 'noEvaluate',
        // bookingCode: '6988'
      },
      progressInfo: [
        // {id: '1', text: '等待管理员审核', subText: '请按预约时间准时到达，到达后请扫场馆码确认到达', done: false},
        // {id: '2', text: '预约申请成功', subText: '等待管理员审核', done: true}
      ],
      rate: {
        rateValue: 0,
        rateInput: ''
      }
    }
  },
  methods: {
    getBookingDetails() {
      user.getBookingDetails({id: this.id}).then((res) => {
        let data = {}
        data.id = res.data.join.id
        data.status = res.data.join.status
        data.image = res.data.venues.image
        data.name = res.data.venues.name
        data.bookingCode = res.data.join.join_code
        data.bookingTime = res.data.join.date_text + ' ' + res.data.join.starttime_text + '-' + res.data.join.endtime_text
        data.server = res.data.server
        data.bookingAdd = res.data.venues.city + res.data.venues.address
        data.num = res.data.join.num
        data.remark = res.data.join.remark
        data.is_comment = res.data.join.is_comment
        data.persons = res.data.persons
        data.cancel_remark = res.data.join.cancel_remark
        this.bookingInfo = data
        if (!this.$tools.isNullOrEmpty(res.data.comment)) {
          this.rate.rateInput = res.data.comment.content
          this.rate.rateValue = parseInt(res.data.comment.score)
        }

        if (!this.$tools.isNullOrEmpty(res.data.flow)) {
          this.progressInfo = res.data.flow
        }
      })
    },
    goEvaluate() {
      this.$router.replace({
        path: `/bookingEvaluate/${this.bookingInfo.id}`
      })
    }
  },
  mounted() {
    this.getBookingDetails()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingInfo {
  height: 100%;
  .infoTop {
    padding: 0 1.4rem;
    box-sizing: border-box;
    height: 5.5rem;
  }
  .infoContent {
    padding: 0 1.4rem;
    box-sizing: border-box;
  }
  .bookingProgress {
    padding: 1.6rem 2rem;
    box-sizing: border-box;
    .progressTop {
      margin-bottom: 2.2rem;
    }
    .progressBottom {
      position: relative;
      .progressItem {
        margin-bottom: 2.8rem;
        .progressIcon {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 1.2rem;
          z-index: 99;
        }
      }
      .progressLine {
        position: absolute;
        top: -0.2rem;
        left: 0.5rem;
        width: 0.2rem;
      }
    }
  }
}
.evaluationBtn {
  .btn {
    width: 34.5rem;
    height: 4.8rem;
    line-height: 4.8rem;
    text-align: center;
    // background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }
}
.rateBox {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  .rate {
    padding: 1.6rem 1.2rem;
    box-sizing: border-box;
  }
  .rateInput {
    line-height: 2.4rem;
    background: rgba(255, 255, 255, 0);
  }
}
.done {
  background-color: #01847f;
}
.unDone {
  background-color: #ccc;
}
</style>
